<template>
  <div class="Module_RealTime">
    <MesHeader text="产品BOM" icon="el-icon-s-grid">
      <template #default>
        <el-input
          v-model="searchFormFields.ProductCode"
          placeholder="产品编码"
          class="fastSearch"
        ></el-input>
        <el-button
          v-for="(btn, bIndex) in btns.slice(0, 10)"
          :key="bIndex"
          :type="btn.type"
          size="small"
          :class="btn.class"
          :plain="btn.plain"
          v-show="!btn.hidden"
          @click="onClick(btn.value)"
          class="btn"
        >
          <i :class="btn.icon"></i> {{ btn.name }}
        </el-button>

        <!-- <el-button
          type="primary"
          plain
          class="btn"
          @click="showSearch = !showSearch"
          v-if="showAdvance"
        >
          <i size="20" class="el-icon-search" />
          高级查询
        </el-button> -->
      </template>
    </MesHeader>

    <div class="searchForm" v-if="showSearch">
      <MesForm :formRules="searchFormOptions" :formFields="searchFormFields">
        <template #default="{ formData }">
          <div style="float: right">
            <el-button type="primary" plain @click="onSearch">
              <i class="el-icon-search"></i>
              查询</el-button
            >
            <el-button type="success" plain @click="clearSearchFields">
              <i class="el-icon-refresh-right"></i>
              重置</el-button
            >
            <el-button plain @click="close">
              <i class="el-icon-switch-button"></i>
              关闭</el-button
            >
          </div>
        </template>
      </MesForm>
    </div>

    <!-- <MesTable
      :height="800"
      :columns="column"
      :tableData="tableData"
      :paginationHide="paginationHide"
      :pagination="{
        total,
        size: 10,
        sizes: [10, 20, 30, 40],
        sortName: 'Product_Id',
      }"
      rowKey="Use_Id"
      style="margin-top: 10px"
      :loadTreeChildren="loadTreeChildren"
      ref="MesTable"
      single
      :loadKey="true"
      @pageNoChange="pageNoChange"
      v-if="showTable"
    ></MesTable> -->
    <div class="gridTable">
      <el-table
        v-if="showTable"
        ref="MesTables"
        class="v-table"
        height="100vh - 95px"
        :data="tableData"
        row-key="Use_Id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :load="loadTreeChildren"
        :default-expand-all="false"
        :expand-row-keys="expandRowKeys"
        show-overflow-tooltip
        stripe
        border
        lazy
      >
        <el-table-column type="selection" align="center" width="100">
        </el-table-column>

        <el-table-column
          v-for="item in filterColumns"
          :prop="item.field"
          :label="item.title"
          :width="item.width ? item.width + '' : ''"
        >
          <template #default="scope">
            <table-render
              v-if="item.render && typeof item.render == 'function'"
              :row="scope.row"
              key="rd-01"
              :index="scope.$index"
              :column="item"
              :render="item.render"
            ></table-render>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination" key="pagination-01" style="display: flex">
        <div style="flex: 1"></div>
        <el-pagination
          key="pagination-02"
          @current-change="pageNoChange"
          :current-page="paginations.page"
          :page-sizes="paginations.sizes"
          :page-size="paginations.size"
          layout="total, prev, pager, next, jumper"
          :total="paginations.total"
          class="pagination"
        ></el-pagination>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="警告" width="30%" center>
      <span>确认删除此节点吗？</span>
      <template #footer>
        <el-button @click="confirm" type="primary">确 认</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </template>
    </el-dialog>

    <MesBox
      :title="title"
      v-model="visible"
      :height="350"
      :width="800"
      :mask="true"
      :onModelClose="closeModal"
    >
      <el-form ref="form" :rules="rules" :model="formFields">
        <el-form-item label="产品名称" prop="Product_Id" :labelWidth="100">
          <el-select
            v-model="formFields.Product_Id"
            style="width: 400px"
            :disabled="disabled"
            filterable
            @change="changeProduct"
          >
            <el-option
              v-for="item in ProductNameList"
              :value="item.key"
              :label="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="比例" prop="QuantityPer" :labelWidth="100">
          <el-input-number
            v-model="formFields.QuantityPer"
            :min="0"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="父分类" prop="Use_Id" :labelWidth="100">
          <el-select v-model="ProductCode" @change="getChildren">
            <el-option
              v-for="item in FPList"
              :key="item.use_Id"
              :value="item.productCode"
              :label="item.productName"
            ></el-option>
          </el-select>
          <el-tree-select
            v-model="formFields.Use_Id"
            check-strictly
            :render-after-expand="false"
            auto-expand-parent
            :data="allBOMList"
            :props="props"
            value-key="use_Id"
            default-expand-all
            style="width: 400px"
          />
        </el-form-item>

        <el-form-item label="损耗" prop="loss" :labelWidth="100">
          <el-input-number v-model="formFields.loss" :min="0"></el-input-number>
        </el-form-item>

        <!-- <el-form-item label="备注" prop="Remark" :labelWidth="100">
          <el-input type="textarea" v-model="formFields.Remark"></el-input>
        </el-form-item> -->

        <el-form-item
          label="加工要求"
          prop="ProcessMessage"
          :labelWidth="100"
          v-if="title == '编辑'"
        >
          <el-input
            type="textarea"
            v-model="formFields.ProcessMessage"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="委外加工要求"
          prop="OutsourceMessage"
          :labelWidth="100"
          v-if="title == '编辑'"
        >
          <el-input
            type="textarea"
            v-model="formFields.OutsourceMessage"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="success" @click="saveData">
          <i class="el-icon-check"></i>
          保存</el-button
        >

        <el-button type="danger" @click="closeModal">
          <i class="el-icon-close"></i>
          关闭</el-button
        >
      </template>
    </MesBox>

    <ImportModal
      v-model:visible="ImportVisible"
      title="产品BOM-导入"
      url="api/Base_BomDetailTest/ImportNew"
      @refresh="onSearch"
      @handleClose="closeImportModal"
    ></ImportModal>
  </div>
</template>

<script>
import MesHeader from '@/components/basic/MesHeader.vue'
import MesForm from '@/components/basic/MesForm'
import MesBox from '@/components/basic/MesBox.vue'
import { defineComponent } from 'vue'
import { mapGetters } from 'vuex'
import buttons from '/config/buttons.js'
import MesTable from '@/components/basic/MesTable.vue'
import MesTableRender from '@/components/basic/MesTable/MesTableRender'
import ImportModal from '@/extension/custom/custom/custom_extend/ImportModal.vue'

export default defineComponent({
  name: 'Base_ProductionBom',
  components: {
    MesHeader,
    MesForm,
    MesBox,
    MesTable,
    MesBox,
    ImportModal,
    'table-render': MesTableRender,
  },
  data() {
    let checkDecimal = (rule, value, callback) => {
      if (value) {
        const reg = /^[0-9.]+$/
        if (reg.test(value)) {
          console.log('通过')
          callback()
        } else {
          console.log('不通过')
          callback(new Error('请输入数字'))
        }
      }
    }

    return {
      searchFormOptions: [
        [
          {
            title: '产品名称',
            field: 'ProductName',
            type: 'text',
            colSize: 6,
          },
          {
            title: '产品编码',
            field: 'ProductCode',
            type: 'text',
            colSize: 6,
          },
        ],
        [
          {
            title: '创建时间',
            field: 'CreateDate',
            type: 'date',
            colSize: 6,
            render: () => {
              return (
                <el-date-picker
                  v-model={this.searchFormFields.CreateDate}
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              )
            },
          },
        ],
      ],
      searchFormFields: {
        // ProductName: '',
        ProductCode: '',
        // CreateDate: '',
      },
      showSearch: false,
      btns: [],
      showAdvance: true,
      column: [
        {
          title: '主键Id',
          field: 'Bom_Id',
          hidden: true,
        },
        {
          title: '父级ID',
          field: 'Parent_Id',
          hidden: true,
        },
        {
          title: '产品编码',
          field: 'ProductCode',
          width: 250,
        },
        {
          title: '产品名称',
          field: 'ProductName',
          width: 150,
        },
        {
          title: '产品标准',
          field: 'ProductStandard',
          width: 150,
        },
        {
          title: '单位',
          field: 'Unit_Id',
          bind: {
            key: 'unitList',
            data: [],
          },
          render: (h, { row }) => {
            let unlist = this.column[5].bind.data
            let result = unlist.find((item) => item.key == row.Unit_Id)
            if (result !== undefined) {
              return <el-tag>{result.value}</el-tag>
            } else {
              return <el-tag></el-tag>
            }
          },
        },
        {
          title: '比例',
          field: 'QuantityPer',
        },
        {
          title: '损耗',
          field: 'loss',
        },
        {
          title: '产品类型',
          field: 'SType',
          render: (h, { row }) => {
            let SType =
              row.SType == 1
                ? '产成品'
                : row.SType == 2
                ? '半成品'
                : row.SType == 3
                ? '原材料'
                : row.SType == 4
                ? '委外产品'
                : row.SType == 5
                ? '劳保'
                : '包辅材'

            return <el-tag>{SType}</el-tag>
          },
        },
        {
          title: '创建时间',
          field: 'CreateDate',
          width: 150,
        },
        {
          title: '创建人',
          field: 'Creator',
        },
        {
          title: '修改时间',
          field: 'ModifyDate',
          width: 150,
        },
        {
          title: '修改人',
          field: 'Modifier',
        },
        // {
        //   title: '备注',
        //   field: 'Remark',
        // },
        {
          title: '加工要求',
          field: 'ProcessMessage',
        },
        {
          title: '委外加工要求',
          field: 'OutsourceMessage',
        },
      ],
      tableData: [],
      title: '新建',
      visible: false,
      formFields: {
        Product_Id: '',
        QuantityPer: '',
        Use_Id: '0',
        // Remark: '',
        BomId: '',
        DicName: '',
        Parent_Id: '',
        loss: 0,
        ProcessMessage: '',
        OutsourceMessage: '',
      },
      ProductNameList: [],
      Materials: [],
      oneLevelTree: [],
      props: {
        children: 'children',
        value: 'use_Id',
        label: 'productName',
      },
      params: {
        order: 'desc',
        page: 1,
        rows: 10,
        sort: 'CreateDate',
        value: 1,
        wheres: JSON.stringify([]),
      },
      allBOMList: [
        {
          use_Id: '0',
          productName: '根节点（产成品请使用）',
        },
      ],
      disabled: false,
      Lmap: new Map(),
      refresh: false,
      rules: {
        Product_Id: {
          required: true,
          message: '请选择产品',
        },
        QuantityPer: [
          {
            required: true,
            message: '请输入比例',
          },
          {
            validator: checkDecimal,
            trigger: ['blur', 'change'],
          },
        ],
        Use_Id: {
          required: true,
          message: '请选择父节点',
        },
      },
      showTable: true,
      unitList: [],
      dialogVisible: false,
      ImportVisible: false,
      expandRowKeys: [],
      paginations: {
        page: 1,
        size: 10,
        sizes: [10, 20, 50, 100],
        total: 0,
      },
      FPList: [],
      ProductCode: '',
    }
  },
  computed: {
    ...mapGetters({
      permission: 'getPermission',
    }),
    filterColumns() {
      return this.column.filter((x, index) => {
        if (!x.field) {
          x.field = x.title + index
        }
        return !x.hidden
      })
    },
  },
  mounted() {
    this.getBtns()
    this.onSearch()
    this.getMaterials()
    // this.getAllBOM()
    this.changeTableIcon()
    this.iconClick()
    this.getFP()
    this.bindData()
  },
  methods: {
    async onSearch() {
      this.showTable = false
      this.showSearch = false
      let param = JSON.parse(this.params.wheres)
      let { ProductCode } = this.searchFormFields
      // let [startDate, endDate] = CreateDate
      if (param.length == 0) {
        param = [
          {
            name: 'ProductCode',
            value: ProductCode,
            displayType: 'like',
          },
        ]
      } else {
        if (ProductCode == '') {
          this.params.value = 1
        } else {
          this.params.value = null
        }
        // param[0].value = ProductName
        param[0].value = ProductCode
        // param[2].value = startDate
        // param[3].value = endDate
      }

      this.params.wheres = JSON.stringify(param)
      let res = await this.http.post(
        'api/Base_BomDetailTest/GetPageData',
        this.params,
        true
      )

      this.oneLevelTree = res.rows
      this.paginations.total = res.total
      this.tableData = res.rows
      this.$nextTick(() => {
        this.showTable = true

        setTimeout(() => {
          this.changeTableIcon()
        }, 50)
      })
    },
    //获取具有权限的按钮
    getBtns() {
      let btnsPermission = this.permission('/Base_BomDetailTest').permission
      this.btns = buttons.filter((item) => {
        let flag = false
        btnsPermission.forEach((item2) => {
          item.value == item2 ? (flag = true) : null
        })
        return flag
      })

      if (btnsPermission.find((item) => item == 'Search')) {
        if (
          this.searchFormOptions.length > 1 ||
          this.searchFormOptions[0].length > 1
        ) {
          this.showAdvance = true
          return
        }
      }
      this.showAdvance = false
    },
    close() {
      this.showSearch = false
    },
    async onClick(value) {
      // console.log(this.$refs.MesTables);
      let selected = this.$refs.MesTables.getSelectionRows()
      switch (value) {
        case 'Add':
          this.title = '新建'
          this.disabled = false
          this.visible = true
          break
        case 'Update':
          if (selected.length == 0) return this.$message.error('请选择一条数据')
          if (selected.length > 1)
            return this.$message.error('只能选择一条数据进行编辑')
          let {
            Product_Id,
            QuantityPer,
            Parent_Id,
            // Remark,
            ProcessMessage,
            OutsourceMessage,
            Bom_Id: BomId,
            DicName,
            loss,
          } = selected[0]
          // console.log(selected[0])
          this.disabled = true
          this.title = '编辑'
          this.visible = true
          this.formFields = {
            Product_Id,
            QuantityPer,
            Use_Id: Parent_Id,
            // Remark,
            BomId,
            DicName,
            loss,
            ProcessMessage,
            OutsourceMessage,
          }
          let product = this.Materials.find(
            (item) => item.Product_Id == this.formFields.Product_Id
          )
          this.formFields.DicName = product.DicName
          let index = this.getPath(this.oneLevelTree, selected[0].Use_Id)[0]
          this.$nextTick(() => {
            this.ProductCode = this.tableData[index].ProductCode
            this.getChildren(this.ProductCode)
            this.formFields.Use_Id = Parent_Id
          })
          break
        case 'Search':
          this.onSearch()
          break
        case 'Delete':
          if (selected.length == 0) return this.$message.error('请选择一条数据')
          this.dialogVisible = true
          break
        case 'Import':
          this.openImportModal()
          break
      }
    },
    // 保存Bom
    async saveData() {
      // console.log(this.formFields);
      // this.$refs.form.validate(async (valid) => {
      // console.log(valid)
      // if (valid) {
        let {
          Product_Id,
          QuantityPer,
          Use_Id,
          // Remark,
          BomId,
          DicName,
          loss,
          ProcessMessage,
          OutsourceMessage,
        } = this.formFields
        let res = null
        if (this.title == '新建') {
          res = await this.http.post(
            'api/Base_BomDetailTest/NewBomInsert',
            { Product_Id, QuantityPer, Use_Id, DicName, loss },
            true
          )
        } else {
          res = await this.http.post(
            `api/Base_BomDetailTest/BomUpdate?BomId=${BomId}&Product_Id=${Product_Id}&QuantityPer=${QuantityPer}&Parent_Id=${Use_Id}&Loss=${loss}&ProcessMessage=${ProcessMessage}&OutsourceMessage=${OutsourceMessage}`,
            null,
            true
          )
        }
        if (res.status) this.$message.success(res.message)
        else return this.$message.error(res.message)
        this.formFields = {
          Product_Id: '',
          QuantityPer: 0,
          Use_Id: '0',
          // Remark: '',
          BomId: '',
          DicName: '',
          Parent_Id: '',
          loss: 0,
          ProcessMessage: '',
          OutsourceMessage: '',
        }
        this.visible = false
        this.onSearch()
      // }
      // })
    },
    // 删除行
    remove() {
      this.$refs.createTable.delRow()
    },
    // 树形结构加载子节点
    async loadTreeChildren(tree, treeNode, resolve) {
      let { Use_Id, Parent_Id } = tree
      if (!this.Lmap.has(Parent_Id)) {
        this.Lmap.set(Parent_Id, { tree, treeNode, resolve })
      }
      let res = null
      if (this.refresh) {
        res = await this.http.post(
          'api/Base_BomDetailTest/getChildrenData?Parent_Id=' + Parent_Id,
          {},
          true
        )
      } else {
        res = await this.http.post(
          'api/Base_BomDetailTest/getChildrenData?Parent_Id=' + Use_Id,
          {},
          true
        )
      }
      // console.log(res.rows)
      setTimeout(() => {
        this.iconClick()
      }, 50)
      resolve(res.rows)
      let useId = tree.Use_Id
      let data = this.getParentId(this.oneLevelTree, useId)
      data.Children = res.rows
      // console.log(this.oneLevelTree)
    },
    // 获取半成品和原材料
    async getMaterials() {
      let res = await this.http.get(
        'api/Base_BomDetailTest/GetProductMatrail',
        {},
        true
      )
      this.Materials = res
      this.ProductNameList = res.map((item) => {
        return {
          key: item.Product_Id,
          value: item.ProductName + ' -- ' + item.DicName,
        }
      })
    },
    // 关闭弹出框
    closeModal() {
      this.visible = false
      Object.keys(this.formFields).forEach((item) => {
        if (item == 'Use_Id') {
          this.formFields[item] = '0'
        } else if (item == 'loss') {
          this.formFields[item] = 0
        } else {
          this.formFields[item] = ''
        }
      })
    },
    async getChildren(ProductCode) {
      // console.log(ProductCode)
      this.formFields.Use_Id = ''
      let res = await this.http.get(
        'api/Base_BomDetailTest/GetBOMList?ProductCode=' + ProductCode,
        null,
        true
      )
      // console.log(res)
      this.allBOMList = res
      this.allBOMList.push({
        use_Id: '0',
        productName: '根节点（产成品请使用）',
      })
    },
    async getFP() {
      let res = await this.http.get(
        '/api/Base_BomDetailTest/GetProduct',
        null,
        true
      )
      this.FPList = res
    },
    // 刷新懒加载数据
    refreshLazyMap(ParentId) {
      let rtr = this.Lmap.get(ParentId)
      let lazyMap = this.$refs.MesTable.getLazyMap()
      if (rtr) {
        rtr.treeNode.loading = true
        this.refresh = true
        lazyMap.value[ParentId] = []
        this.loadTreeChildren(rtr.tree, rtr.treeNode, rtr.resolve)
        this.refresh = false
      }
    },
    changeProduct(e) {
      let product = this.Materials.find((item) => item.Product_Id == e)
      this.formFields.DicName = product.DicName
    },
    // 清空搜索字段
    clearSearchFields() {
      this.searchFormFields = {
        ProductName: '',
        ProductCode: '',
        CreateDate: '',
      }
    },
    // table箭头改成加号
    changeTableIcon() {
      let table__expand = document.querySelectorAll('.el-table__expand-icon')
      table__expand.forEach((item) => {
        if (item.classList.contains('el-table__expand-icon--expanded')) {
          item.removeChild(item.children[0])
          item.insertAdjacentHTML('afterbegin', '<i class="el-icon-minus"></i>')
        } else {
          if (item.children.length == 0) {
            item.insertAdjacentHTML(
              'afterbegin',
              '<i class="el-icon-plus"></i>'
            )
          } else if (
            item.children[0].className === 'el-icon' ||
            item.children[0].className === 'el-icon-minus'
          ) {
            item.removeChild(item.children[0])
            item.insertAdjacentHTML(
              'afterbegin',
              '<i class="el-icon-plus"></i>'
            )
          }
        }
      })
    },
    iconClick() {
      setTimeout(() => {
        this.changeTableIcon()
      }, 50)
      let doc = document.querySelectorAll('.el-table__expand-icon')
      doc.forEach((item) => {
        item.addEventListener('click', () => {
          this.changeTableIcon()
        })
      })
    },
    // 确认删除
    async confirm() {
      let selected = this.$refs.MesTables.getSelectionRows()
      if (selected.length > 1) {
        return this.$message.error('只能选择一条数据进行删除')
      }
      let { Bom_Id: BomId } = selected[0]
      let res = await this.http.post(
        `api/Base_BomDetailTest/BomDelete?BomId=${BomId}`,
        null,
        true
      )
      if (res.status) {
        this.$message.success('删除成功')
        this.dialogVisible = false
        this.onSearch()
      }
    },
    // 打开导入弹出框
    openImportModal() {
      this.ImportVisible = true
      // this.addCloseFun()
    },
    closeImportModal() {
      this.ImportVisible = false
      // this.removeCloseFun()
    },
    pageNoChange(e) {
      this.params.page = e
      this.paginations.page = e
      this.onSearch()
    },
    async bindData() {
      let parmas = []
      this.column.forEach((item) => {
        if (item.bind) {
          parmas.push(item.bind.key)
        }
      })

      let res = await this.http.post(
        'api/Sys_Dictionary/GetVueDictionary',
        parmas,
        true
      )
      res.forEach((item) => {
        this.column.forEach((it) => {
          if (it.bind) {
            if (it.bind.key == item.dicNo) {
              it.bind.data = item.data
            }
          }
        })
      })
    },
    getParentId(list, iid) {
      for (let o of list || []) {
        if (o.Use_Id == iid) return o
        const o_ = this.getParentId(o.Children, iid)
        if (o_) return o_
      }
    },
    getPath(array, id) {
      let result = []
      for (let i = 0; i < array.length; i++) {
        if (array[i].Use_Id === id) {
          result.push(i)
          return result
        } else if (array[i].Children) {
          const childResult = this.getPath(array[i].Children, id)
          if (childResult.length > 0) {
            result.push(i)
            return result
          }
        }
      }
      return result
    },
  },
})
</script>

<style lang="less" scoped>
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0;
}
.Module_RealTime {
  padding: 15px;
  height: calc(100vh - 95px);

  .fastSearch {
    width: 200px;
  }
  .btn {
    padding: 15px;
    margin-left: 10px;
  }

  .searchForm {
    background: #fefefe;
    border: 1px solid #eae8e8;
    position: absolute;
    z-index: 999;
    left: 15px;
    right: 15px;
    padding: 25px 20px;
    border-top: 0;
    box-shadow: 0 7px 18px -12px #bdc0bb;
    padding-top: 50px;
  }

  .gridTable {
    padding: 15px 0;
  }
}

/deep/ .el-table__expand-icon--expanded {
  transform: rotate(0) !important;
}

/deep/ .el-table--fit {
  height: calc(100vh - 195px);
}

/deep/ .el-table .cell {
  white-space: nowrap;
}
</style>

<style scoped>
/* .v-table ::v-deep(.even-row){
  background: rgb(245,247,250);
} */
.pagination {
  text-align: right;
  padding: 2px 28px;
  border: 1px solid #eee;
  border-top: 0px;
}
/* .v-table ::v-deep(.el-input .el-input__inner) {
  padding: 0 7px;
} */
.v-table ::v-deep(.el-table__header th) {
  /* padding: 0px !important; */
  background-color: #f8f8f9 !important;
  font-size: 13px;
  height: 46px;
  color: #616161;
}

.v-table ::v-deep(.el-table__header th.is-sortable) {
  padding: 3px !important;
}
.mes-table.text-inline ::v-deep(.el-table__body .cell),
.mes-table.text-inline ::v-deep(.el-table__header-wrapper .cell) {
  word-break: inherit !important;
  white-space: nowrap !important;
}
/* .v-table  ::v-deep(.el-table__body td) {
  padding: 9px 0 !important;
} */

.v-table ::v-deep(.el-table__footer td) {
  padding: 7px 0 !important;
}

.mes-table ::v-deep(.el-table-column--selection .cell) {
  display: inline;
}
.mes-table.text-inline ::v-deep(.el-table th > .cell) {
  white-space: nowrap !important;
}

.mes-table .table-img {
  height: 40px;
  border-radius: 5px;
  margin-right: 10px;
  width: 40px;
  object-fit: cover;
}
.mes-table .table-img:hover {
  cursor: pointer;
}

.mes-table ::v-deep(.cell) {
  padding: 2px 10px;
}
.mes-table ::v-deep(.cell .el-tag) {
  padding: 5px 9px;
}
.table-input {
  color: rgb(104, 103, 103);
  padding: 3px 10px;
  height: 32px;
  line-height: 32px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
}
.table-input:focus {
  outline: 1px solid #49a3fd;
}
</style>
